<template>
	<view>
		<view class="box">
			<view class="title">登录</view>
			<view class="bottom">
				<view class="ipt">
					<view class="phone mg">
						<view class="">
							<image src="../../static/smallIcon/loginphone.png" mode=""></image>
							<input type="number" placeholder="请输入手机号" v-model="account"/>
						</view>
					</view>
					<view class="phone">
						<view class="">
							<image src="../../static/smallIcon/shield.png" mode=""></image>
							<input type="password" placeholder="请输入密码"  v-model="password"/>
						</view>
					</view>
				</view>
				<view class="userOk">
					<u-checkbox-group v-model="checkboxValue1" @change="checkboxChange" iconColor="#ffffff"
						activeColor="#F5AC4F" size="16">
						<u-checkbox :customStyle="{marginTop: '2px'}"></u-checkbox>
					</u-checkbox-group>
					<view class="text">
						登录代表同意遵守<text class="color">《用户协议》</text>和<text class="color">《隐私协议》</text>
					</view>
				</view>
				<view class="btn">
					<view class="login" @click="login">登录</view>
					<view class="wx">
						<view class="">
							<uni-icons type="weixin" size="25" color="#F5AC4F"></uni-icons>
						</view>
						<view class="">
							<button class="none" @click="weixin">微信一键登录</button>
						</view>
					</view>
					<!-- <view class="pass" @click="getPassword">忘记密码?</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require('@/commonFun/httpRequest.js');
	export default {
		data() {
			return {
				account:"",
				password:"",
				checkboxValue1: false,
			};
		},
		methods: {
			checkboxChange() {
				this.checkboxValue1 = !this.checkboxValue1;
			},
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
				return a;
			},
			login(){
				if(this.account==""){
					httpRequest.toast("请输入手机号")
					return false
				}
				if(!this.isMobile(this.account)){
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				if(this.password==""){
					httpRequest.toast("请输入密码12")
					return false
				} 
				if(!this.checkboxValue1){
					httpRequest.toast("请认真阅读并勾选用户协议和隐私政策");
					return false;
				}
				httpRequest.request('/customapi/user/login','GET',{
					account:this.mobile, 
					password:this.password
				}).then(res => {
					if(res.code == 1){
						httpRequest.toast('登录成功');
						uni.setStorageSync('token',res.data.userinfo.token);
						uni.setStorageSync('user_id',res.data.userinfo.user_id);
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					}else{
						httpRequest.toast(res.msg);
					}
				})
			},
			weixin(){
				uni.redirectTo({
					url:"/pages/login/logintwice"
				})
			},
			getPassword() {
				uni.navigateTo({
					url: 'getPassword'
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.none {
		color: #F5AC4F !important;
	}

	.loginpage {
		padding: 100rpx 45rpx 0 45rpx;
	}

	.logoImg-box {
		text-align: center;
		border-bottom: 1rpx solid #b8b8b8;
		width: 100%;
		padding-bottom: 42rpx;
	}

	.logoImg {
		width: 216rpx;
		height: 216rpx;
	}

	.applytext {
		color: #333333;
		font-size: 34rpx;
		line-height: 40rpx;
		margin-top: 59rpx;
		font-weight: bold;
		display: inline-block !important;
	}

	.obtaintext {
		color: #666666;
		font-size: 28rpx;
		line-height: 33rpx;
		margin-top: 25rpx;
		font-weight: bold;
	}

	.loginbtn {
		padding: 0 32rpx;
		color: #fff;
		font-size: 36rpx;
		line-height: 24rpx;
		font-weight: bold;
	}

	.applybtn {
		width: 100%;
		border-radius: 50rpx;
		// background-color: #f5ac4f;
		// margin-top: 176rpx;
		height: 90rpx;
		color: #fff;
		text-align: center;
	}

	.temporarily-not-loginbtn {
		width: 100%;
		border-radius: 50rpx;
		background-color: #bbbbbb;
		margin-top: 20rpx;
		padding: 33rpx 0;
		text-align: center;
	}

	.checklist-box {
		margin-right: 3px !important;
	}

	.checklist-box .is--default .is-checked {}

	.mg {
		margin-top: 150rpx;
	}

	.color {
		color: #f5ac4f;
	}

	.box {
		height: 100vh;
		// background-image: url("@/static/Finance/Finance2.png");
		// background-image: url('@/static/login/login1.png');
		background-size: 100%;
		// padding-left: 72rpx;
		padding: 0 71rpx;
	
	.bottom {
			.btn {
				margin-top: 99rpx;

				.login {
					font-size: 36rpx;
					color: #ffffff;
					background: #f5ac4f;
					border-radius: 52rpx;
					padding: 35rpx;
				}

				.wx {
					font-size: 36rpx;
					color: #f5ac4f;
					background: #f5f5f5;
					border: 2rpx solid #f5ac4f;
					border-radius: 52rpx;
					padding: 35rpx;
					margin: 30rpx 0;
					align-items: center;
					display: flex;
					justify-content: center;

					button {
						border: none !important;
						// border: none;
						border-radius: 0px;
						background-color: rgb(245, 245, 245) !important;
					}

					button {
						color: #f5ac4f !important;
						width: 100%;
						// background-color: white;
						border: none;
						text-align: center;
						padding: 0px;
						margin: 0px;
						line-height: 1.3;
						font-size: 16px;
					}

					/* 去除边框 */
					button::after {
						border: none;
						border-radius: 0;

					}
				}

				.pass {
					font-size: 28rpx !important;
					color: #f5ac4f;
				}

				view {
					text-align: center;
					font-weight: 800;

					font-family: PingFang SC;
				}
			}

			.userOk {
				display: flex;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #999999;

				.text {
					view {
						display: inline-block;
					}

					// .flc{
					// 	float: right;
					// }
				}
			}

			.ipt {
				.phone {
					border-bottom: 2px solid #cecece;
					display: flex;
					align-items: center;
					margin-bottom: 100rpx;

					view {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						image {
							width: 26rpx;
							height: 30rpx;
							margin-right: 37rpx;
						}
					}
				}
			}
		}

		.title {
			// padding: 219rpx 0 0 72rpx;
			padding-top: 100rpx;
			font-size: 80rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #f5ac4f;
		}
	}
</style>
